@import "./metismenu";

@media (max-width: 768px) {
    .framework#wrapper {
        .side-normal {
            width: 0;
            animation: blur .4s both;
        }

        .side-narrow {
            width: 70px;
        }

        .side-hidden {
            width: 0;
        }
    }
}

.framework {
    width: 100%;
    min-height: 100%;
    background: #e3e3e3;
    display: flex;
}

#wrapper {
    .navbar-static-side {
        width: 220px;
        overflow-x: hidden;
        background-color: #2f4050;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        transition: all 0.4s;
    }
    .sidebar {
        width: 100%;
        min-height: 100px;
        flex: 1;
        .sidebar-header {
            background: #f3f3f4;
            width: 100%;
            .side-switch-btn {
                padding: 4px 12px;
                margin: 8px;
            }
        }
        .navbar-right {
            margin-right: 0;
            .logout-btn {
                color: #999c9e;
            }
        }
    }
}

#wrapper .navbar-static-side.side-narrow {
    overflow-x: inherit;
}

#wrapper {
    .side-normal {
        width: 220px;
    }

    .side-narrow {
        width: 70px;
    }

    .side-hidden {
    }
}
.framework .animation-blur {
    animation: blur .4s both;
}

@keyframes blur {
    0% {
        filter: blur(0px);
    }
    50% {
        filter: blur(30px);
    }
    100% {
        filter: blur(0px);
    }
}